<!--横版卡片样式2-->
<template>
  <section class="horizontal-card-two" :style="{ 'margin-top': top, 'padding': `0 ${spacing}`}">
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <section class="card2-container">
      <section v-for="(item,index) in list" :key="index" class="card2-item">
        <section class="img-box" :style="{height: imgHeight}">
          <label-comp v-if="(option.resource === 'hd' || option.resource === 'zb') && labelObj!==undefined" :label-list="item.labelList" class-name="my-tag" />
          <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="">
            </template>
          </van-image>
        </section>
        <section class="card2-right" :style="{height: imgHeight}">
          <section class="title etc">{{ isInitData ? getMapping(item,'title') : item.name }}</section>
          <section v-if="showSubTilte" class="subtitle etc">{{ isInitData ? getMapping(item,'subTitle') : item.otherInfo }}</section>
          <section v-if="showThirdTilte" class="des etc">{{ isInitData ? getMapping(item,'thirdTitle') : item.positionalTitles }}</section>
          <section v-if="showFourthTilte" class="view-count">{{ isInitData ? getMapping(item,'fourthTitle') : item.introduce }}</section>
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'HorizontalCardTwo',
  components: { LabelComp, CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          name: '标题',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '副标题',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          activityStatus: 'HDZT_YJS',
          activityStatusName: '已结束',
          positionalTitles: '三级标题',
          introduce: '四级标题' },
        {
          name: '标题',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '副标题',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          positionalTitles: '三级标题',
          introduce: '四级标题'
        },
        {
          name: '标题',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '副标题',
          positionalTitles: '三级标题',
          introduce: '四级标题' }
      ],
      labelObj: undefined,
      pageSize: 0,
      active: ''
    }
  },
  computed: {
    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 176)
    },
    // 是否展示副标题
    showSubTilte() {
      return this.option.showSubTilte
    },
    // 是否展示三级标题
    showThirdTilte() {
      return this.option.showThirdTilte
    },
    // 是否展示四级标题
    showFourthTilte() {
      return this.option.showFourthTilte
    }
  },

  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.number
      if (this.option.resource === 'hd' || this.option.resource === 'zb') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.dataList?.data) === '[object Array]') {
        rows = result.dataList?.data || []
      } else {
        rows = result.dataList?.data.rows || []
      }
      if ((this.option.resource === 'hd' || this.option.resource === 'zb') && this.labelObj !== undefined) {
        this.setLabel(rows, 'list')
      } else {
        this.list = rows
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
.horizontal-card-two {
  margin: 0 auto;
  position: relative;
  width: rem(750);
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .card2-container{
    .card2-item{
      padding:rem(24);
      margin-bottom: rem(20);
      display: flex;
      background-color: #fff;
      border-radius: rem(16);
      align-items: center;
      .img-box{
        width: rem(310);
        height: rem(176);
        margin-right: rem(22);
        position: relative;
        .van-image{
          width: 100%;
          height: 100%;
          .van-image__img{
            border-radius: rem(16);
          }
          .van-image__error{

            border-radius: rem(16);
          }
          .van-image__error{
            > img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
      }
      .card2-right{
        flex: 1 0 auto;
        width: rem(345);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: rem(6) 0;
        > section {
          width: 100%;
        }
        .title{
          color:#333;
          font-size: rem(28);
          font-weight: bold;
        }
        .subtitle{
          color:#46616E;
          font-size: rem(26);
        }
        .des{
          color:#999999;
          font-size: rem(24);
        }
        .view-count{
          color:#8196A1;
          font-size: rem(24);
          text-align: right;
        }
      }
    }
  }
}

</style>
